// 创建外壳组件App
import React from "react"
import Header from "./components/Header"
import List from "./components/List"
import Footer from "./components/Footer"

import './App.css'

class App extends React.Component {

    // state在哪里，操作状态的方法就在哪里

    // 初始化状态
    state = {
            todos: [
                {id:'001',name:'吃饭',done: true},
                {id:'002',name:'睡觉',done: true},
                {id:'003',name:'打代码',done: false}
            ]
        }
    
    addTodo = (todo) => {
        const {todos} = this.state
        const newTodos = [todo,...todos]
        this.setState({todos:[...newTodos]})
    }

    updateTodo = (id,done) => {
        // 获取状态中的todos
        const {todos} = this.state
        const newTodos = todos.map((todo)=> {
            if (todo.id === id) {
                todo.done = done
            }
            return todo
        })

        this.setState({todos: newTodos})
    }
 
    deleteTodo = (id) => {
        const {todos} = this.state
        const newTodos = todos.filter((todo)=> {
            return todo.id !== id
        })
        this.setState({todos: newTodos})
    }

    onChangeCheckedTodo = (flag) => {
        const {todos} = this.state
        const newTodos = todos.map((todo)=> {
            todo.done = flag
            return todo
        })
        this.setState({todos: newTodos})
    }

    deleteTodoAll = () => {
        const {todos} = this.state
        const newTodos = todos.filter((todo)=> {
            return !todo.done
        })
        this.setState({todos: newTodos})
    }

    render () {
        const {todos} = this.state
        
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo} />
                    <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
                    <Footer todos={todos} onChangeCheckedTodo={this.onChangeCheckedTodo} deleteTodoAll={this.deleteTodoAll}/>
                </div>
            </div>
        )
    }
}

// 暴露App组件，供外部进行使用
export default App